<template>
  <el-row>
    <el-col :span="24">
      <el-card class="search-form">
        <el-form ref="searchForm" class="el-form-col el-form-s" :model="search">
          <el-row :gutter="15">
            <el-col :span="6">
              <el-form-item prop="no" label="">
                <el-input v-model="search.no" placeholder="提现流水" clearable></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" prop="bankAccount">
                <el-input v-model="search.bankAccount" placeholder="提现账号"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="" prop="payee">
                <el-input v-model="search.payee" placeholder="提现人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="primary" :loading="searchLoading" plain native-type="submit" @click.prevent="searchFunc(search)"><span>搜索</span></el-button>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button type="primary" plain @click="isOpen = !isOpen">{{ isOpen ? '收起' : '展开' }}</el-button>
            </el-col>
            <el-col :span="2" class="text-center">
              <el-button @click="resetFields" plain>重置</el-button>
            </el-col>

          </el-row>

          <el-collapse-transition>
            <template  v-if="isOpen">
              <el-row :gutter="15">
                <el-col :span="6">
                  <el-form-item label="" prop="startTime">
                    <el-date-picker type="date"
                                    placeholder="提现开始时间"
                                    v-model="search.startTime"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-form-item label="" prop="endTime">
                    <el-date-picker type="date"
                                    placeholder="提现结束时间"
                                    v-model="search.endTime"
                                    value-format="yyyy-MM-dd"
                                    style="width: 100%;"></el-date-picker>
                  </el-form-item>
                </el-col>
                <template v-if="state == 2">
                  <el-col :span="6">
                    <el-form-item label="" prop="auditor">
                      <el-input v-model="search.auditor" placeholder="处理人"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="" prop="auditStartTime">
                      <el-date-picker type="date"
                                      placeholder="处理开始时间"
                                      v-model="search.auditStartTime"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item label="" prop="auditEndTime">
                      <el-date-picker type="date"
                                      placeholder="处理结束时间"
                                      v-model="search.auditEndTime"
                                      value-format="yyyy-MM-dd"
                                      style="width: 100%;"></el-date-picker>
                    </el-form-item>
                  </el-col>
                </template>
              </el-row>
            </template>
          </el-collapse-transition>

        </el-form>
      </el-card>
    </el-col>
    <el-col :span="24">
      <BasicTable
        ref="BasicTable"
        url="/ms-destoon-finance-cash/cash/cash-list"
        :tabs="tabs"
        :columns="columns">
        <template slot="buttons">
          <el-button :disabled="state != 1" type="primary" @click="showDialog()">批量允许</el-button>
        </template>
        <template slot="column">
          <el-table-column fixed="right" width="100px" align="center" label="操作" v-if="state == 1">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                @click="showDialog(scope.row)"
              >
                允许提现
              </el-button>
            </template>
          </el-table-column>
        </template>
      </BasicTable>
    </el-col>
  </el-row>
</template>
<script>
import {unixTimestampFilter} from '@/filters'
import {copy, dotData, arrayColumn, confirm} from '@/utils'
import {getServiceType, getAddedService} from '@/utils/selectOptions'
export default {
  name: 'cashExamineIndex',
  data() {
    let columns = [
      {
        label: '提现流水',
        data: 'no'
      },
      {
        label: '提现人',
        data: 'payee'
      },
      {
        label: '提现金额',
        data: 'money'
      },
      {
        label: '提现时间',
        data: 'cashTime',
        width: '134px',
        render(data, full) {
          return unixTimestampFilter(data)
        }
      },
      {
        label: '钱包余额',
        data: 'balance'
      },
      {
        label: '转账银行',
        data: 'bankName'
      },
      {
        label: '银行账号',
        data: 'bankAccount'
      }
    ]
    let columnsOne = copy(columns, true)
    let columnsTwo = copy(columns, true)
    columnsTwo.splice(7, 0, {
      label: '处理人',
      data: 'auditor'
    },
    {
      label: '处理时间',
      data: 'auditTime',
      width: '134px',
      render(data, full) {
        return unixTimestampFilter(data)
      }
    })
    return {
      state: 1,
      isOpen: false,
      visible: false,
      searchLoading: false,
      search: {
        no: '',
        serviceNo: '',
        bankAccount: '',
        payee: '',
        startTime: '',
        endTime: '',
        auditor: '',
        auditStartTime: '',
        auditEndTime: ''
      },
      columns,
      tabs: [
        {
          label: '待处理',
          callback: (params) => {
            params.status = 'unchecked'
            this.state = 1
          },
          columns: columnsOne
        },
        {
          label: '已处理',
          callback: (params) => {
            params.status = 'approve'
            this.state = 2
          },
          columns: columnsTwo
        }
      ]
    }
  },
  created() {
    // 模拟下拉框选项
    getServiceType().then(arr => {
      this.serviceTypes = arr
    })
    getAddedService().then(arr => {
      this.addedServices = arr
    })
  },
  methods: {
    // 搜索
    searchFunc(search) {
      const basicTable = this.$refs.BasicTable
      if (basicTable) {
        let params = copy(search)
        this.searchLoading = true
        basicTable.search(params).finally(_ => {
          this.searchLoading = false
        })
      }
    },
    // 重置表单
    resetFields() {
      const searchForm = this.$refs.searchForm
      if (searchForm) {
        searchForm.resetFields()
      }
    },
    // 表格刷新
    refresh() {
      this.searchFunc(this.search)
    },
    // 自定义modal
    showDialog(currentData) {
      if (currentData) {
        confirm(`
          <p>提现金额：&nbsp;&nbsp;&nbsp; ${currentData.money}</p>
          <p>提现人：&nbsp;&nbsp;&nbsp; ${currentData.payee}</p>
        `, '允许提现', {
          type: 'warning',
          confirmButtonLoading: true,
          dangerouslyUseHTMLString: true,
          confirmCallBack: ({close, confirmButtonLoadingClose}) => {
            this.$ajax.post(`/ms-destoon-finance-cash/cash/pass?id=${currentData.id}`).then(response => {
              const success = dotData(response, 'success')
              if (success) {
                close().then(_ => {
                  confirm(`操作成功！`, undefined, {
                    type: 'success'
                  }).finally(_ => {
                    this.refresh()
                  })
                  confirmButtonLoadingClose()
                })
              } else {
                confirmButtonLoadingClose()
              }
            }).catch(_ => {
              confirmButtonLoadingClose()
            })
          }
        })
      } else {
        this.passData = this.$refs.dataTable.getSelected() || []
        let ids = arrayColumn(this.passData, 'id')
        if (this.passData.length === 0) {
          alert('请选择订单')
          return false
        } else {
          confirm(`
          <p>你已选中 ${this.passData.length} 单，确定进行批量允许提现操作？</p>
        `, '允许提现', {
            type: 'warning',
            confirmButtonLoading: true,
            dangerouslyUseHTMLString: true,
            confirmCallBack: ({close, confirmButtonLoadingClose}) => {
              this.$ajax.post('/ms-destoon-finance-cash/cash/batchPassJson', ids).then(response => {
                const success = dotData(response, 'success')
                if (success) {
                  close().then(_ => {
                    confirm(`操作成功！`, undefined, {
                      type: 'success'
                    }).finally(_ => {
                      this.refresh()
                    })
                    confirmButtonLoadingClose()
                  })
                } else {
                  confirmButtonLoadingClose()
                }
              }).catch(_ => {
                confirmButtonLoadingClose()
              })
            }
          })
        }
      }
    }
  }
}
</script>
